import React from 'react';
import ProForm, { ModalForm, ProFormText } from '@ant-design/pro-form';
import { showMsg, MsgType } from '@/utils/utils';
import { updateOrderStatus } from '@/services/shop/api';

const OptForm: React.FC<any> = (props) => {
  const { id, onSubmit, onCancel } = props;

  const onFinish = async (values) => {
    try {
      if (values.receiver_mobile.length !== 11) {
        showMsg('请输入正确的手机号');
        return;
      }
      await updateOrderStatus({
        order_id: id,
        order_status: 'F',
        ...values,
      })
      showMsg('已自提', MsgType.SUCCESS);
      onSubmit();
    } catch (error) {
      showMsg(error?.data?.errmsg);
    }
  }

  return <ModalForm
      className="modal-form"
      width="40%"
      title="提货信息"
      visible
      modalProps={{
        onCancel: () => onCancel(),
      }}
      layout='horizontal'
      onFinish={async (value) => {
        console.log(value)
        onFinish(value)
      }}
      
      submitter={{
        searchConfig: {
          resetText: '取消',
          submitText: '确认提货'
        }
      }}>
      <ProForm.Group>
        <ProFormText
          label="提货人"
          rules={
            [
              {
                required: true
              }
            ]
          }
          placeholder="请输入提货人姓名"
          width="md"
          name="receiver"
        />
      </ProForm.Group>
          
      <ProForm.Group>
        <ProFormText
          label="手机号"
          rules={
            [
              {
                required: true
              }
            ]
          }
          placeholder="请输入提货人手机号"
          width="md"
          fieldProps={{
            maxLength: 11,
            style: {
              fontSize: 12
            }
          }}
          name="receiver_mobile"
        />
      </ProForm.Group>
    </ModalForm>
}
export default OptForm;
